<template>
    <div class="card page">
        <div class="con">
            <div class="items">
                <div class="item" v-for="(item,index) in cardList" :key="index">
                    <!--                    <div class="title">-->
                    <!--                       未使用-->
                    <!--                    </div>-->
                    <div class="card" :class="{c1:index%2==0,c2:index%2!=0}">
                        <div class="left">
                            <span class="name">{{item.name}}</span>
                            <span class="info">课卡 | {{item.userName}} | {{status[item.status]}}</span>
                        </div>
                        <div class="right">
                            <!--                            <span class="status" v-if="item.status==2">已用</span>-->
                            <!--                            <div v-else>-->
                            <!--                                <span @click="showQrCode(item.code)" v-if="item.send"-->
                            <!--                                      class="qr iconfont iconqr-code"></span>-->
                            <!--                                <span v-else @click="send(item.id)" class="send iconfont iconfasong"></span>-->
<!--                        </div>-->
                        <span @click="send(item.id)" class="send iconfont iconfasong"></span>
                        <span @click="toSign(item.id,item.goodsId)" class="sign iconfont iconbaoming"></span>

                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>
</template>

<script>
    import {listCard} from "../../api/course";

    export default {
        activated() {
            listCard().then(res => {
                this.cards = res.data
            })
        },
        computed: {
            cardList() {
                return this.cards.filter(card => {
                    //只显示没有用过的课卡
                    return card.status != 2
                })
            }
        },
        methods: {

            toSign(cardId, goodsId) {
                this.$router.push({
                    path: '/sign',
                    query: {
                        cardId, goodsId
                    }
                })
            },
            showAlert(cardId) {
                this.$createDialog({
                    type: 'alert',
                    title: '选择您要赠送的用户',
                    content: '',
                    icon: 'cubeic-alert',
                    onConfirm: (e, promptValue) => {
                        this.$router.push({
                            path: '/user',
                            query: {cardId}
                        })
                    }
                }).show()
            },
            send(cardId) {
                this.showAlert(cardId)
            }
        },
        data() {
            return {
                cards: [],
                status: ['未激活', '已激活', '已使用']
            }
        }
    }
</script>

<style scoped lang="stylus">
    .card
        background url("~@/assets/hbg.png") no-repeat $page-bg
        background-size 100% auto
        z-index 2
        height 100%

        .con
            padding 10px 10px 0

            .items
                .item
                    padding 12px
                    border-radius 10px
                    background-color white
                    margin-top 10px

                    .card
                        background-size 100% auto
                        width 100%
                        height 100px
                        display flex
                        align-items center

                        &.c1
                            background url("./assets/c1.png")
                            background-size 100% auto

                        &.c2
                            background url("./assets/c2.png")
                            background-size 100% auto

                        .left
                            display flex
                            flex 1
                            flex-direction column
                            padding-left 20px

                            .name
                                font-size: 15px;
                                font-family: PingFang SC;
                                font-weight 400
                                color: rgba(255, 255, 255, 1);

                            .info
                                flex 1
                                margin-top 7px
                                font-size: 9px;
                                font-family: PingFang SC;
                                color: rgba(255, 255, 255, 1);

                        .right
                            flex 0 0 30px
                            padding-right 10px
                            display flex
                            flex-direction column
                            align-items center
                            justify-content space-between

                            .status
                                font-size 12px
                                color brown

                            .qr, .send, .sign
                                font-size 20px
                                color white

                            .sign
                                margin-top 30px


</style>